<!-- src/views/Feedback.vue -->
<template>
  <div class="feedback-page">
    
    
    <!-- 反馈表单 -->
    <form class="feedback-form" @submit.prevent="submitFeedback">
      <!-- 反馈类型选择 -->
      <van-field
        readonly
        clickable
        name="type"
        label="反馈类型"
        placeholder="请选择反馈类型"
        :value="feedbackTypeText"
        @click="showTypeSelector = true"
        :error="!feedbackType && formSubmitted"
        :error-message="!feedbackType && formSubmitted ? '请选择反馈类型' : ''"
      />
      
      <!-- 反馈内容 -->
      <van-field
        v-model="content"
        type="textarea"
        rows="5"
        name="content"
        label="反馈内容"
        placeholder="请详细描述您遇到的问题或提出您的建议..."
        maxlength="500"
        show-word-limit
        :error="content.trim().length < 10 && content.length > 0"
        :error-message="content.trim().length < 10 ? '反馈内容至少10个字符' : ''"
      />
      
      <!-- 联系方式 -->
      <van-field
        v-model="contact"
        type="text"
        name="contact"
        label="联系方式"
        placeholder="请留下您的手机号或邮箱，方便我们联系您"
        :error="!validateContact() && contact.length > 0"
        :error-message="!validateContact() ? '请输入有效的手机号或邮箱' : ''"
      />
      
      <!-- 上传图片 -->
      <div class="feedback-images">
        <div class="image-label">上传图片</div>
        <van-uploader
          v-model="images"
          multiple
          :max-count="3"
          :after-read="afterReadImage"
          :deletable="true"
        />
        <div class="image-tip">最多上传3张图片，帮助我们更好地理解问题</div>
      </div>
      
      <!-- 提交按钮 -->
      <div class="submit-button">
        <van-button
          type="primary"
          block
          :loading="submitting"
          :disabled="!isFormValid"
        >
          提交反馈
        </van-button>
      </div>
    </form>
    
    <!-- 反馈类型选择器 -->
    <van-action-sheet
      v-model="showTypeSelector"
      title="选择反馈类型"
      :actions="feedbackTypes"
      @select="onTypeSelected"
    />
    
    <!-- 提交成功提示 -->
    <van-popup v-model="showSuccess" position="center" round>
      <div class="success-popup">
        <van-icon name="success" size="50" color="#07c160" />
        <div class="success-title">反馈提交成功</div>
        <div class="success-message">感谢您的反馈，我们会尽快处理</div>
        <van-button type="primary" @click="closeSuccessPopup">
          确定
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedbackType: '',
      feedbackTypeText: '',
      content: '',
      contact: '',
      images: [],
      showTypeSelector: false,
      showSuccess: false,
      submitting: false,
      formSubmitted: false,
      feedbackTypes: [
        { name: '功能建议', value: 'suggestion' },
        { name: '商品问题', value: 'product' },
        { name: '订单问题', value: 'order' },
        { name: '支付问题', value: 'payment' },
        { name: '物流问题', value: 'logistics' },
        { name: '账号问题', value: 'account' },
        { name: '其他问题', value: 'other' }
      ]
    };
  },
  computed: {
    // 表单是否有效
    isFormValid() {
      return this.feedbackType && this.content.trim().length >= 10;
    }
  },
  methods: {
    // 选择反馈类型
    onTypeSelected(item) {
      this.feedbackType = item.value;
      this.feedbackTypeText = item.name;
      this.showTypeSelector = false;
    },
    
    // 处理图片上传
    afterReadImage(file) {
      // 可以在这里进行图片处理，如压缩、格式验证等
      this.images.push({
        url: file.content,
        name: file.name
      });
    },
    
    // 验证联系方式
    validateContact() {
      if (!this.contact) return true; // 非必填字段
      
      // 验证手机号或邮箱
      const phoneRegex = /^1[3-9]\d{9}$/;
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      
      return phoneRegex.test(this.contact) || emailRegex.test(this.contact);
    },
    
    // 提交反馈
    async submitFeedback() {
      this.formSubmitted = true;
      
      if (!this.isFormValid) {
        if (!this.feedbackType) {
          this.$toast.fail('请选择反馈类型');
        } else if (this.content.trim().length < 10) {
          this.$toast.fail('反馈内容至少需要10个字符');
        }
        return;
      }
      
      this.submitting = true;
      
      try {
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1500));
        
        // 实际项目中应调用API
        /*
        const response = await this.$http.post('/api/feedback/submit', {
          type: this.feedbackType,
          content: this.content,
          contact: this.contact,
          images: this.images.map(img => img.url)
        });
        */
        
        // 显示成功提示
        this.showSuccess = true;
        
        // 重置表单
        this.resetForm();
      } catch (error) {
        console.error('提交反馈失败', error);
        this.$toast.fail('提交失败，请稍后再试');
      } finally {
        this.submitting = false;
      }
    },
    
    // 重置表单
    resetForm() {
      this.feedbackType = '';
      this.feedbackTypeText = '';
      this.content = '';
      this.contact = '';
      this.images = [];
      this.formSubmitted = false;
    },
    
    // 关闭成功提示
    closeSuccessPopup() {
      this.showSuccess = false;
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.feedback-form {
  padding: 15px;
}

.feedback-images {
  margin-top: 15px;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.image-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.image-tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.submit-button {
  margin-top: 30px;
  padding: 0 15px;
}

.success-popup {
  padding: 30px 20px;
  text-align: center;
}

.success-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}

.success-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
</style>